<template>
<el-card class="box-card">
  <el-form :model="specForm" ref="specForm" label-width="100px">
   <el-form-item label="规格图片" v-show="specPicture">
          <el-upload
            class="avatar-uploader"
            :limit="maxLimit"
            name="imageFile"
            list-type="picture-card"
            :disabled="isDisableds"
            :auto-upload="true"
            :headers="requestHeader"
            :action="uploadImgUrl"
            :show-file-list="true"
            :on-success="handleAvatarSuccesss"
            :on-remove="handleRemoves"
            :before-upload="beforeAvatarUploads"
            :data="uploadParam"
            accept="image/jpeg, image/png"
            :file-list="uploadFileLists"
          >
            <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
        </el-form-item>
  </el-form>
</el-card>
</template>
<script>
import globalVariable from '@/utils/global';
import {
  getByModelList,
  addGoodsModel,
  selectByGoodsModelVal,
  addGoodsModelVal
} from "api/shop/goods/goods/index";
export default {
  props: {
    goodSpecForm:Object,
    index: {
      type: Number,
      required: true
    },
    items: {
      type: Array,
      default: Array
    }
  },
  data() {
    return {
      options: [],
      modelS: [],

      optiones: [],
      modelValS: [],

      specForm:{
        name:"",
        stockQuantity:"",
        netWeight:"",
        netWeightUnit:"",
        memberPrice:0,
        price:0,
        menchantPrice:0,
        modelAttrId: undefined,
        attrValueId: [],
        modelAttrName: undefined
      },
       goodsModel: {
        //添加商品规格
        modelAttrId: undefined,
        modelAttrName: undefined,
        shopId: undefined
      },
      goodsModelVal: {
        attrValueId: undefined,
        attrValueName: undefined,
        modelAttrId: undefined,
        shopId: undefined
      },
      goodsModelValCondition: {
        //查询条件
        attrValueName: undefined
      },
    
    };
 },
 filters: {
  // numFilter (value) {
  //   // 截取当前数据到小数点后两位
  //   let realVal = parseFloat(parseFloat(value)/parseFloat(100)).toFixed(2)
  //   return realVal
  // }
 },
//  mounted: function(){
//     console.log("mounted:"+ JSON.stringify(this.items));
//     this.specForm = {...this.items[this.index]}
//     //this.goodSpecForm = {...this.items[this.index]}
//  },
 watch:{
  },
   created() {
     this.getAllModel();
    
  },
  methods: {
    getAllModel() {
      getByModelList(globalVariable.goodsShopId).then(response => {
        this.options = response.data;
        for (var i = 0; i < response.data.length; i++) {
          // alert(response.data[i].modelAttrName);
          this.modelS.push(response.data[i].modelAttrName);
        }
      });
    },
      remoteMethod(val) {
      this.specForm.attrValueId = [];
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        if (this.modelS.indexOf(val) == -1) {
          this.goodsModel.modelAttrName = val;
          addGoodsModel(this.goodsModel).then(response => {
            this.getAllModel();
          });
        } else {
        }
        this.goodsModelValCondition.attrValueName = val;
        selectByGoodsModelVal(this.goodsModelValCondition).then(response => {
          this.goodsModelVal.modelAttrId =
            response.data.selectByName.modelAttrId;
          this.goodsModelVal.shopId=response.data.selectByName.shopId;
          this.optiones = response.data.selectByList;

          for (var i = 0; i < response.data.selectByList.length; i++) {
            this.modelValS.push(response.data.selectByList[i].attrValueName);
          }
        });
      }
    },
    remoteMethode(val) {
      var regu = /^ +| +$/g;
      if (val == "" || val == undefined || regu.test(val)) {
      } else {
        if (this.modelValS.indexOf(val[0]) == -1) {
          this.goodsModelVal.attrValueName = val[0];
          addGoodsModelVal(this.goodsModelVal).then(response => {

          });
        } else {
        }
      }
    },
    deleteComp(){
        console.log("remove:"+this.index);
        this.$emit('remove',this.index);
    },
    validateForm() { 
      return new Promise(reslove => {
        this.$refs['specForm'].validate((valid) => { 
          reslove({valid, data: this.specForm})
        }) 
      }) 
    }
  }
};
</script>